<template>
  <div class="product-detail">
    <el-card class="detail-card">
      <div class="product-content">
        <!-- 商品图片和基本信息 -->
        <div class="product-main">
          <div class="product-gallery">
            <el-image
              :src="baseUrl + productInfo.mainImage"
              :preview-src-list="[baseUrl + productInfo.mainImage]"
              class="main-image"
              fit="cover"
            />
          </div>
          <div class="product-info">
            <h1 class="product-title">{{ productInfo.productName }}</h1>
            <div class="product-meta">
              <span class="category">类别：{{ productInfo.categoryName }}</span>
              <span class="stock">库存：{{ productInfo.stock }}</span>
            </div>
            <div class="product-price">
              <span class="price-label">价格：</span>
              <span class="price-value">¥{{ productInfo.price }}</span>
            </div>
            <div class="product-actions">
              <el-input-number
                v-model="quantity"
                :min="1"
                :max="productInfo.stock"
                size="large"
                class="quantity-input"
              />
              <el-button type="primary" size="large" @click="handleBuy">立即购买</el-button>
              <el-button size="large" @click="handleAddToCart">加入购物车</el-button>
            </div>
          </div>
        </div>

        <!-- 商品详情和评价 -->
        <div class="product-tabs">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="商品详情" name="detail">
              <div class="detail-content">
                <div class="materials" v-if="productInfo.materials">
                  <h3>材质</h3>
                  <p>{{ productInfo.materials }}</p>
                </div>
                <div class="craft" v-if="productInfo.craft">
                  <h3>制作工艺</h3>
                  <p>{{ productInfo.craft }}</p>
                </div>
                <div class="ich-elements" v-if="productInfo.ichElements">
                  <h3>非遗元素</h3>
                  <p>{{ productInfo.ichElements }}</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品评价" name="comments">
              <div class="comments-section">
                <div v-if="comments.length" class="comments-list">
                  <div v-for="comment in comments" :key="comment.commentId" class="comment-item">
                    <el-avatar :src="comment.avatar" size="small"></el-avatar>
                    <div class="comment-content">
                      <div class="comment-header">
                        <span class="username">{{ comment.userName }}</span>
                        <el-rate
                          v-model="comment.rating"
                          disabled
                          show-score
                          text-color="#ff9900"
                        />
                      </div>
                      <div class="comment-text">{{ comment.content }}</div>
                      <div class="comment-images" v-if="comment.images && comment.images.length">
                        <el-image
                          v-for="(image, index) in comment.images"
                          :key="index"
                          :src="image"
                          :preview-src-list="comment.images"
                          class="comment-image"
                        />
                      </div>
                      <div class="comment-time">{{ comment.createTime }}</div>
                    </div>
                  </div>
                </div>
                <el-empty v-else description="暂无评价" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getProduct } from '@/api/ich/product'
import { listProductComment } from '@/api/ich/product'
import { createOrder } from '@/api/ich/order'

const route = useRoute()
const router = useRouter()
const productInfo = ref({})
const comments = ref([])
const quantity = ref(1)
const activeTab = ref('detail')
const baseUrl = import.meta.env.VITE_APP_BASE_API

// 获取商品详情
const getProductInfo = async () => {
  try {
    const res = await getProduct(route.params.id)
    if (res.code === 200) {
      productInfo.value = res.data
    }
  } catch (error) {
    console.error('获取商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
  }
}

// 获取商品评价
const getComments = async () => {
  try {
    const res = await listProductComment({
      productId: route.params.id,
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === 200) {
      comments.value = res.rows.map(comment => ({
        ...comment,
        rating: comment.rating || 5  // 如果没有评分则默认5分
      }))
    }
  } catch (error) {
    console.error('获取商品评价失败:', error)
    ElMessage.error('获取商品评价失败')
  }
}

// 立即购买
const handleBuy = () => {
  if (!productInfo.value?.productId) {
    ElMessage.error('商品信息不存在')
    return
  }
  router.push({
    path: '/user/orders/confirm',
    query: {
      productId: productInfo.value.productId,
      quantity: quantity.value
    }
  })
}

// 加入购物车
const handleAddToCart = () => {
  ElMessage.success('已加入购物车')
}

onMounted(() => {
  getProductInfo()
  getComments()
})
</script>

<style lang="scss" scoped>
.product-detail {
  padding: 20px;

  .detail-card {
    .product-content {
      .product-main {
        display: flex;
        margin-bottom: 40px;

        .product-gallery {
          width: 400px;
          margin-right: 40px;

          .main-image {
            width: 100%;
            height: 400px;
            border-radius: 4px;
          }
        }

        .product-info {
          flex: 1;

          .product-title {
            font-size: 24px;
            margin: 0 0 20px;
            color: #333;
          }

          .product-meta {
            margin-bottom: 20px;
            color: #666;

            span {
              margin-right: 20px;
            }
          }

          .product-price {
            margin-bottom: 30px;
            
            .price-label {
              font-size: 16px;
              color: #666;
            }

            .price-value {
              font-size: 28px;
              color: #f56c6c;
              font-weight: bold;
            }
          }

          .product-actions {
            display: flex;
            align-items: center;
            gap: 20px;

            .quantity-input {
              width: 150px;
            }
          }
        }
      }

      .product-tabs {
        .detail-content {
          padding: 20px 0;
        }

        .comments-section {
          .comments-list {
            .comment-item {
              display: flex;
              padding: 20px 0;
              border-bottom: 1px solid #eee;

              &:last-child {
                border-bottom: none;
              }

              .comment-content {
                flex: 1;
                margin-left: 15px;

                .comment-header {
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;

                  .username {
                    font-weight: bold;
                    margin-right: 15px;
                  }
                }

                .comment-text {
                  margin-bottom: 10px;
                  color: #666;
                }

                .comment-images {
                  display: flex;
                  gap: 10px;
                  margin-bottom: 10px;

                  .comment-image {
                    width: 80px;
                    height: 80px;
                    border-radius: 4px;
                  }
                }

                .comment-time {
                  color: #999;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style> 